<template>
  <div class="register-box" v-if="isFirst">
    <div id="returnLogin"><el-button type="primary" link @click="this.$router.push('/login')">返回登录</el-button></div>
    <el-row>
      <el-col :span="24" > <label style="color: black; font-size: 20px">手机号注册</label></el-col>
    </el-row>
    <el-row>
        <el-col :span="4" :offset="3"><label>手机号</label></el-col>
        <el-col :span="12" ><el-input v-model="username" type="text" clearable>
          <template #prefix>
            <span class="iconfont icon-shouji"></span>
          </template>
        </el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>验证码</label></el-col>
      <el-col :span="7" ><el-input v-model="mailCode" type="text"  clearable>
        <template #prefix>
          <span class="iconfont icon-ziyuan"></span>
        </template>
      </el-input></el-col>
      <el-col :span="5" ><el-button round :disabled="sendDisabled" @click="getMailCode">{{ sendValue }}</el-button></el-col>
    </el-row>
    <el-row>
      <el-col><el-button type="primary" @click="verify">下一步</el-button></el-col>
    </el-row>
  </div>
  <div class="register-box" v-if="!isFirst">
    <el-row>
      <el-col :span="24" > <label style="color: black; font-size: 20px">设置密码</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>密码</label></el-col>
      <el-col :span="12" ><el-input v-model="password" type="password" show-password><template #prefix>
        <span class="iconfont icon-mima"></span>
      </template></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>确认密码</label></el-col>
      <el-col :span="12" ><el-input v-model="ensurepassword" type="password" show-password><template #prefix>
        <span class="iconfont icon-mima"></span>
      </template></el-input></el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button type="primary" @click="register">注册</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name:'register',
  data(){
    return{
      username:'',
      isFirst:true,
      password:'',
      mailCode:'',
      ensurepassword:'',
      timer:null,
      times:60,
      sendValue:"发送验证码",
      sendDisabled:false,
    }
  },
  methods:{
    register:function (){//注册
      if(this.ensurepassword===this.password){
        if(this.password.length<6){
          // alert('密码长度不能小于6位')
          ElMessage.warning('密码长度不能小于6位')
        }else {
          axios({
            method: 'post',
            url: '/api/login/save',
            data: {
              username: this.username,
              password: this.password
            },
          }).then((res)=>{
            if(res.data.code==='1'){
              // alert('注册成功')
              ElMessage.success(res.data.message)
              this.$router.push('/login')
            }else if(res.data.code==='0'){
              // alert('注册失败')
              ElMessage.error(res.data.message)
            }
          })
        }

      }else{
        // alert('两次输入密码不相同')
        ElMessage.warning('两次输入密码不相同')
      }

    },
    verify:function (){//验证验证码
      axios({
        method: 'post',
        url: '/api/login/isCode',
        data:{
          username: this.username,
          code: this.mailCode,
        }

      }).then((res)=>{
        if(res.data.code==='1'){
          this.isFirst=!this.isFirst

        }else if(res.data.code==='0'){
          // alert('验证码错误')
          ElMessage.warning(res.data.message)
        }
      })
    },
    getMailCode:function (){//获取验证码
      let a=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
      if(!a.test(this.username)){
        // alert('请输入正确的手机号')
        ElMessage.warning('请输入正确的手机号')
      }else{
        axios({
          method: 'post',
          url: '/api/login/getRegisterCode',
          data: {
            username: this.username,
          },
        }).then((res)=>{
          if(res.data.code==='1'){
            // alert('验证码已发送')
            ElMessage.success(res.data.message)
            this.timer=setInterval(()=>{
              this.times--;
              if(this.times<=0){
                this.sendValue='发送验证码';
                clearInterval(this.timer);
                this.times=60;
                this.sendDisabled=false;
              }else{
                this.sendValue=this.times+'秒后重试';
                this.sendDisabled=true;
              }
            },1000)
          }else if(res.data.code==='0'){
            // alert('验证码发送失败,该手机号已注册')
            ElMessage.error(res.data.message)
          }
        })
      }

    }
  }
}


</script>

<style scoped>
.register-box{
  width: 450px;
  height: 240px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid black;
  opacity: 0.85;
  filter: alpha(opacity=90);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  padding-top: 2%;
  box-shadow: 2px 2px 10px rgba(140, 147, 157, 0.69);
}
.el-row{
  margin-bottom: 20px;
}
.el-row:last-child{
  margin-top: 30px;
}

#returnLogin{
  position: absolute;
  top: 2%;
  right: 2%;
}
</style>